<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{
            background: #ccc;
        }
        .a2{
            text-decoration: underline;
        }
        .a3{
            height: 100px;
        }
    </style>
    <script>
        function query(){
            // 根据id获取页面上的元素
            // var obj = document.getElementById('wanho')
            // console.log(obj) // DOM对象，表示的是页面上的元素
            // console.log(typeof obj)

            //   根据name获取页面上的元素
            // var objs = document.getElementsByName('happy')
            // console.log(objs)

            // 根据标签名获取页面上的元素
            // var objs = document.getElementsByTagName('div')
            // console.log(objs)
        }

        function operate(){
            // 操作属性 
            // var obj = document.getElementById('wanho')
            // console.log(obj.title)
            // obj.title = '嘿嘿'

            // var username = document.getElementById('username')
            // console.log(username.value)
            // username.value = '帅哥'
            // var male = document.getElementById('male')
            // console.log(male.checked) // 返回true或false

            // 访问内容
            var obj = document.getElementById('wanho')
            // console.log(obj.innerHTML)
            // console.log(obj.innerText)
            // obj.innerText = '哈哈哈哈'

            // 访问CSS
            // console.log(obj.style.color)
            // obj.style.color = 'blue'

            // console.log(obj.classList)
            // obj.classList.add('a3')
            obj.classList.remove('a1')
        }
    
        function add(){
            var obj = document.getElementById('wanho')

            var p = document.createElement('p')
            p.innerText = '你好，世界'
            p.title = 'hello world'

            // obj.appendChild(p)
            obj.insertBefore(p, document.getElementById('world'))
        }

        function remove(){
            document.getElementById('wanho').remove()
        }
    </script>
</head>
<body>
    <button onclick="query()">查询操作</button> 
    <button onclick="operate()">访问操作</button> 
    <button onclick="add()">添加操作</button> 
    <button onclick="remove()">删除操作</button> 

    <div name="happy">hello</div>
    <div id="wanho" title="哈哈哈哈" style="color: red;" class="a1 a2">
        <h2 id="world">world</h2>
    </div>
    <p name="happy">welcome</p>

    用户名：<input type="text" id="username" value="tom"> <br>
    性别：<input type="radio" id="male" value="male" checked> 男
</body>
</html>